@import '~antd/lib/style/themes/default.less';

@sm-gutter: 16px;
@lg-gutter: 32px;

@size: 50px;

.grid-card{
  overflow: hidden;
  height: 100%;
  margin: 0 auto;
  padding: 0 @lg-gutter;
  background: @component-background;

  &-nav{
    width: 704px;
    margin: 40px auto 0;
    text-align: left;

  &__item {
    display: inline-block;
    width: 320px;
    height: 82px;
    margin: 16px;
    padding: 16px 24px;
    cursor: pointer;
    text-align: left;
    border: 1px solid @component-background;
    border-radius: 4px;
    background: @component-background;

    &:hover {
      border-color: @disabled-bg;
      box-shadow: @shadow-1-down;
    }

    &-icon{
      display: inline-block;
      width: @size;
      height: @size;
      background-repeat: no-repeat;
      background-position: center center;
      background-size: contain;
      vertical-align: middle;

    }
    &-name-box {
      display: inline-block;
      padding-left: 18px;
      vertical-align: top;
      vertical-align: middle;
    }

    &-name {
      font-family: @font-family;
      font-size: 16px;
      line-height: 25px;
      color: @text-color;
    }

    &-desc {
      font-family: @font-family;
      font-size: 12px;
      line-height: 25px;
      max-width: 204px;
      color: @text-color-secondary;
      }
    }
  }
}
